<template>
  <el-col class="addcontent">
    <el-card shadow="never">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="form"
        label-width="150px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="优惠券类型:" prop="type">
          <el-select v-model="form.type" placeholder="全场赠券">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券名称:" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="适用平台" prop="platform">
          <el-select v-model="form.platform" placeholder="全平台">
            <el-option label="全平台" :value="0" />
            <el-option label="移动端" :value="1" />
            <el-option label="PC端" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="总发行量:" prop="publishCount">
          <el-input
            v-model.number="form.publishCount"
            placeholder="只能输入正整数"
          />
        </el-form-item>
        <el-form-item label="面额:" prop="amount">
          <el-input
            v-model.number="form.amount"
            placeholder="面值只能是数值,限2位小数"
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每人限领:" prop="perLimit">
          <el-input v-model.number="form.perLimit">
            <template #append>张</template>
          </el-input>
        </el-form-item>
        <el-form-item label="使用门槛:" prop="minPoint">
          <el-input v-model.number="form.minPoint" placeholder="只能输入正整数">
            <template #prepend>满</template>
            <template #append>元可用</template>
          </el-input>
        </el-form-item>
        <el-form-item label="领取日期:" prop="enableTime">
          <el-date-picker
            v-model="form.enableTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="有效期:">
          <el-col :span="11">
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <span class="text-gray-500">至</span>
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="可使用商品:" prop="useType">
          <el-radio-group v-model="form.useType">
            <el-radio-button :label="0">全场通用</el-radio-button>
            <el-radio-button :label="1">指定分类</el-radio-button>
            <el-radio-button :label="2">指定商品</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="note">
          <el-input
            v-model="form.note"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >提交</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-col>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import * as http from "@/request/api";
import type { FormInstance, FormRules } from "element-plus";
import router from "@/router";

const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入优惠券名称", trigger: "blur" }],
  publishCount: [
    {
      required: true,
      message: "只能输入正整数",
      trigger: "blur",
    },
    {
      type: "number",
      message: "请输入正整数",
      trigger: "blur",
      transform(value) {
        if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
          return true;
        }
      },
    },
  ],
  amount: [
    {
      required: true,
      message: "面值只能是数值,限2位小数",
      trigger: "blur",
    },
    {
      type: "number",
      message: "面值只能是数值,限2位小数",
      trigger: "blur",
      transform(value) {
        if (!/^(\d|[1-9]\d)(\.\d{1,2})?$/.test(value)) {
          return true;
        }
      },
    },
  ],
  minPoint: [
    {
      required: true,
      message: "只能输入正整数",
      trigger: "blur",
    },
    {
      type: "number",
      message: "请输入正整数",
      trigger: "blur",
      transform(value) {
        if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
          return true;
        }
      },
    },
  ],
});

let form = ref({} as CouponList);
form.value.perLimit = 1;
form.value.type = 0;
form.value.platform = 0;
form.value.useType = 0;

const typeList = [
  {
    value: 0,
    label: "全场赠券",
  },
  {
    value: 1,
    label: "会员赠券",
  },
  {
    value: 2,
    label: "购物赠券",
  },
  {
    value: 3,
    label: "注册赠券",
  },
];

// 点击重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 点击添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      http.coupon.CouponCreate(form.value);
      router.push("/sms/coupon");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style>
.addcontent {
  position: absolute;
  left: 0;
  right: 0;
  width: 720px;
  padding: 30px 30px 10px 30px;
  margin: 20px auto;
}
.demo-ruleForm {
  padding: 10px 30px;
}
.text-gray-500 {
  margin: 0 10px;
}
</style>
